import { AntDesign } from "@expo/vector-icons";
import { router } from "expo-router";
import React from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
interface NavBarProps {
  title: string;
  rightElement?: React.ReactNode;
}
export default function NavBar({ title, rightElement }: NavBarProps) {
  return (
    <View style={styles.header}>
      <TouchableOpacity onPress={() => router.back()}>
        <AntDesign name="arrowleft" size={20} color="black" />
      </TouchableOpacity>
      <Text style={styles.headerText}>{title}</Text>
      {rightElement && <View>{rightElement}</View>}
    </View>
  );
}
const styles = StyleSheet.create({
  header: {
    position: "relative",
    top: 0,
    left: 0,
    right: 0,
    zIndex: 999, // 设置层级，使header在最上层
    height: 50,
    backgroundColor: "#fff",
    flexDirection: "row", // 使用行布局
    alignItems: "center",
    paddingHorizontal: 10, // 增加左右内边距
  },
  headerText: {
    color: "black",
    fontSize: 18,
    flex: 1, // 使标题文本占据剩余空间
    textAlign: "center", // 文本居中
  },
});
